<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="PIXINVENT">
    <title>自助售货管理后台</title>
    <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>

<body>
<div class="content-wrapper">
    <div class="content-header ">
        <div class="content-header-left mb-2 ">

            <h3 class="content-header-title mb-0">请假管理 </h3>

        </div>
    </div>

    <div class="card">
        <div class="card-content">
            <div class="card-body">
                <div class="searchbox">
                    <form class="form-inline" th:action="@{/attendance_approval}" th:object="${leaveForm}"
                          method="get">
<!--                        <div class="form-group">-->
<!--                            <input type="text" class="form-control" th:field="*{fromId}" placeholder="请输入假单编号">-->
<!--                        </div>-->
                        <div class="form-group">
                            <input type="text" class="form-control" th:field="*{employeeName}" placeholder="请输入用户名称">
                        </div>
<!--                        <div class="form-group">-->
<!--                            <input type="text" class="form-control" th:field="*{state}" placeholder="请输入审批状态">-->
<!--                        </div>-->
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">查询</button>
                        </div>
                    </form>
                    <div class="form-group">
                        <button type="submit" class="btn btn-success" onclick="add()">新增</button>
                    </div>
                </div>
                <!-- <div class="funcbtn clearfix">
                  <div class="pull-left"><a class="btn btn-info" href="#" data-toggle="modal" data-target="#myModal">
                      薪资录入</a></div>
                </div> -->
                <div class="tablebox1">
                    <table class="table">
                        <thead>
                        <tr>

                            <th>编号</th>
                            <th>姓名</th>
                            <th>职务</th>
                            <th>部门</th>
                            <th>类型</th>
                            <th>请假日期</th>
                            <th>登记日期</th>
                            <th>请假原因</th>
                            <th>批准</th>


                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="el : ${pageInfo.getList()}">
                            <td th:text="${el.fromId}">001</td>
                            <td th:text="${el.employeeName}">张三</td>
                            <td th:text="${el.postName}">程序员</td>
                            <td th:text="${el.departmentName}">技术部</td>
                            <td th:switch="${el.fromType}">
                    <span th:case="1">
                      事假
                    </span>
                                <span th:case="2">
                      病假
                    </span>
                                <span th:case="3">
                      工伤假
                    </span>
                                <span th:case="4">
                      婚假
                    </span>
                                <span th:case="5">
                      产假
                    </span>
                                <span th:case="6">
                      丧假
                    </span>
                                <span th:case="*">
                      未知
                    </span>
                            </td>
                            <td th:text="${#dates.format(el.startTime,'yyyy-MM-dd HH:mm:ss')}">2021-9-24 00:00:00.0</td>
                            <td th:text="${#dates.format(el.endTime,'yyyy-MM-dd HH:mm:ss')}">2021-9-24 21:00:00.0</td>
                            <td th:text="${el.reason}">我生病了</td>
                            <td th:switch="${el.state}">
                                <span th:case="process">正在审批</span>
                                <span th:case="approved">审批通过</span>
                                <span th:case="*">审批被驳回</span>
                            </td>
                            <td>
                                <a href="#" class="btn btn-primary btn-td" th:data-id="${el.fromId}"
                                   onclick="edit(this.getAttribute('data-id'))">修改</a>
                                <a href="#" class="btn btn-danger btn-td" th:del-id="${el.fromId}"
                                   onclick="del(this.getAttribute('del-id'))">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <div class="page clearfix">
                        <div class="pull-left"
                             th:text="|共  ${pageInfo.getTotal()} 条记录 第 ${pageInfo.getPageNum()} / ${pageInfo.getPages()} 页|"></div>
                        <div class="pull-right">

                            <nav aria-label="..." class="pull-left">
                                <ul class="pagination" th:each=" el : ${pageInfo.getNavigatepageNums()}"
                                    th:switch="${el}">
<!--                                    <li class="disabled"><a href="#" aria-label="Previous"><span-->
<!--                                            aria-hidden="true">«</span></a></li>-->
                                    <li th:case="1" class="active"><a
                                            th:href="@{'/attendance_approval?pageSize=' + ${el}}" th:text="${el}"></a>
                                    </li>
                                    <li th:case="*"><a th:href="@{'/attendance_approval?pageSize=' + ${el}}"
                                                       th:text="${el}"></a></li>
                                </ul>
                            </nav>

                            <div class="pull-left p-r-20  p-l-20"><select class="form-control">
                                <option>10条每页</option>
                            </select></div>

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title1" id="modal-title1"> 修改用户信息</h4>
                </div>
                <from id="myForm" name="myForm">
                    <div class="modal-body">
                        <div class="form1 from2">
                            <ul class="row">
                                <li class="col-xs-10">
                                    <span>员工编号：</span>
                                    <input type="number" class="form-control" name="name" id="edit_employeeId" value="">
                                </li>
                                <li class="col-xs-10">
                                    <span>请假类型：</span>
                                    <input type="number" class="form-control" name="name" id="edit_fromType" value="">
                                </li>
                                <li class="col-xs-10">
                                    <span>开始时间：</span>
                                    <input type="datetime-local" class="form-control" id="edit_startTime" value="">
                                </li>
                                <li class="col-xs-10">
                                    <span>结束时间：</span>
                                    <input type="datetime-local" class="form-control" id="edit_endTime" value="">
                                </li>
                                <li class="col-xs-10">
                                    <span>请假原因：</span>
                                    <input type="text" class="form-control" id="edit_reason" value="">
                                </li>
                                <li class="col-xs-10">
                                    <span>审批状态：</span>
                                    <input type="text" class="form-control" id="edit_state" value="">
                                </li>
                            </ul>
                            <input type="number" class="form-control" style="display: none;" id="edit_fromId" value="">
                        </div>
                    </div>
                </from>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
<script src="app-assets/js/app.js" type="text/javascript"></script>
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $(".ewm").click(function () {
            $(this).toggleClass("active")
        });
    });

    function edit(id) {
        console.log(id)
        document.getElementById('modal-title1').innerText = '修改请假单'
        $.get('/attendance_approval/selectById/' + id, function (e, d) {
            console.log(e.state)
            document.getElementById('edit_employeeId').value = e.employeeId
            document.getElementById('edit_fromType').value = e.fromType
            document.getElementById('edit_startTime').value = e.startTime
            document.getElementById('edit_endTime').value = e.endTime
            document.getElementById('edit_reason').value = e.reason
            document.getElementById('edit_fromId').innerText = e.fromId
            document.getElementById('edit_state').innerText = e.state
            $('#myModal').modal('show')
        })
    }

    function add() {
        document.getElementById('modal-title1').innerText = '新增请假单'
        document.getElementById('edit_employeeId').value = '',
        document.getElementById('edit_fromType').value = '',
        document.getElementById('edit_startTime').value = '',
        document.getElementById('edit_endTime').value = '',
        document.getElementById('edit_reason').value = '',
        document.getElementById('edit_fromId').innerText = '',
        document.getElementById('edit_state').innerText = ''
        $('#myModal').modal('show')
        // $.post('attendance_management/save', {}, function (e, d) {
        //   console.log(e,d)
        // });
    }

    function save() {
        let params = {
            employeeId: document.getElementById('edit_employeeId').value,
            formType: document.getElementById('edit_fromType').value,
            reason: document.getElementById('edit_reason').value,
            state: document.getElementById('edit_state').innerText,
            formId: document.getElementById('edit_fromId').innerText,
        }
        console.log(params.formId)
        if (params.formId === null || params.formId === '' || params.formId === undefined) {
            $.post('attendance_approval/insert', params, function (e, d) {
                $('#myModal').modal('hide')
                location.reload();
            });
        } else {
            $.post('attendance_approval/update', params, function (e, d) {
                $('#myModal').modal('hide')
                location.reload();
            });
        }

    }

    function del(id) {
        var r = confirm("请确认是否删除该数据！");
        if (r === true) {
            $.get('/attendance_approval/delete/' + id, function (e, d) {
                location.reload();
            })
        }
    }
</script>
</body>

</html>
